
import React, { useEffect, useState, useCallback } from 'react'
import request from '@/utils/request'
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    VisualMapComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { Select } from 'antd'

echarts.use([
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);
function MaxScoreAcount() {
    var TvObj = {
        "American": "美剧",
        "Britain": "英剧",
        "China": "国产剧",
        "HongKong": "港剧",
        "Japan": "日剧",
        "JapaneseAnimation": "日本动画",
        "SouthKorea": "韩剧",
        "documentary": "纪录片",
        "variety": "综艺"
    }
    const dataKeys = Object.keys(TvObj)
    const [TvName, setTvName] = useState('American')
    useEffect(async () => {
        var RateData = {}
        for (var key of dataKeys) {
            // console.log(key);
            // const name = key
            const { data: { data } } = await request.get('/getRatelist/getAllRate', {

                params: {
                    // page:page,
                    // pagesize:pagesize,
                    rate: 'rate',
                    collectionName: key
                }

            })
            RateData[key] = data

            // console.log(key)
            // RateData.key=data
            // RateData.push(obj)
        }

        var arr = []
        var obj2 = {}
        // console.log(RateData);
        for (var key in RateData) {
            var obj = {}
            RateData[key].forEach((item) => {
                // console.log(item);
                if (obj[item.rate]) {
                    obj[item.rate] = obj[item.rate] + 1
                } else {
                    obj[item.rate] = 1
                }

            })
            console.log(obj);
            obj2[key] = obj

        }
        // arr.push(obj2)

        // console.log("RateData", obj2);
        for (var key in obj2[TvName]) {
            // arr.push({value:})
            var obj3 = {}
            console.log("RateData", key);
            obj3['value'] = obj2['American'][key]
            obj3['name'] = key
            // for(var keys in obj2[key]){
            // //    obj3={value:obj2[key][keys]}
            //    obj3['value']=obj2[key][keys]
            //    obj3['name']=keys
            //    console.log("RateData", obj2[key]);
            arr.push(obj3)
            // }
            // console.log(key,arr);
        }
        // console.log("RateData", arr);
        var chartDom = document.getElementById('MaxScore');
        var myChart = echarts.init(chartDom, 'dark');
        // var option;

        myChart.setOption({
            backgroundColor: '#2c343c',
            title: {
                text: TvObj[TvName],
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                show: false,
                min: 0,
                // max: 400,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: arr.sort(function (a, b) {
                        return a.value - b.value;
                    }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        })
    }, [TvName])
    const selectChange = useCallback((value) => {
        // console.log('select',value);
        setTvName(value)
    }, [])

    return (
        <div style={{ display: 'inline-block' }}>
            <div style={{ position:'absolute',top:120 ,zIndex:100}}>
                <Select defaultValue={TvName} onChange={selectChange} >
                    {dataKeys.map((item) => {
                        return <Option key={item} value={item}>{TvObj[item] }</Option>
                    })}
                </Select>
            </div>

            <div id="MaxScore" style={{ width: 400, height: 400, display: 'inline-block' }}>
                {/* Score */}


            </div>

        </div>
    )
}

export default MaxScoreAcount;